<script setup>
    import { getHotAPI } from '@/network/home';
    import {ref, onMounted} from 'vue'
    import HomePanel from './HomePanel.vue'

    const HotList = ref([])

    const getHotList = async () => {
       const res = await getHotAPI()
    //    console.log(res);
       HotList.value = res.result
    }

    onMounted(() => {
        getHotList()
    })
</script>


<template>
    <home-panel title="人气推荐" sub-title="人气推荐 品质靠谱">
        <ul class="good-list">
                <li v-for="item in HotList" :key="item.id">
                    <router-link to="/">
                        <img v-img-lazy="item.picture" alt="">
                        <div class="desc">
                            <p>{{item.name}}</p>
                            <span>{{item.title}}</span>
                        </div>
                    </router-link >
                </li>
            </ul>
    </home-panel>
</template>


<style scoped lang="scss">
    .good-list{
            display: flex;
            justify-content: space-between;
            li{
                width: 306px;
                height: 406px;
                transition: all .5s;
                &:hover{
                    transform: translate3d(0, -3px, 0);
                    // 2D放大不适合
                    // transform: scale(1, 1);
                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
                }
                img{
                    width: 306px;
                    height: 306px;
                }
                .desc{
                    font-size: 22px;
                    padding-top: 12px;
                    text-align: center;
                    P{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    span{
                        display: block;
                        color: $priceColor;
                        padding-top: 12px;
                    }
                }
            }
        }
</style>